<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            height: 50%;
            margin: 0px;
            padding: 0px;
        }

        #container {
            width: 500px;
            height: 500px;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=D6WOzHaymzVVKvgiy8UbhQEznkgeK6BD"></script>
</head>

<body >
    <div id="container">
    </div>
    <input id="lng" type="hidden" runat="server" />
    <input id="lat" type="hidden" runat="server" />

    <script type="text/javascript">


        var province = 0;
        var city = 0;
        var district = 0;
        var street = 0;


        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {

            var city_lat = r.latitude;
            var city_lng = r.longitude;
            console.log('city_lat', city_lat);
            console.log('city_lng', city_lng);
            var position={
                latitude:city_lat,
                longitude:city_lat,
            }
                loand(position)
        })
        
        // function enter() {
        //     if (navigator.geolocation) {  //调用导航器geolocation函数
        //         navigator.geolocation.getCurrentPosition(loand); //进入总显示函数loand，函数名由自己定
        //     } else {
        //         alert("您的浏览器不支持地理定位");//不支持
        //     }
        // }
        function loand(position) {  //主函数
                var lat = position.latitude  ;//y，纬度，通过上面的getCurrentPosition函数定位浏览器位置，从而获取地址
                var lon = position.longitude;//x，经度
                //alert(lat);
                var map = new BMap.Map("container"); //初始化地图类
                var point = new BMap.Point(lon, lat); //这里设置刚开始的点所在处
                var gc = new BMap.Geocoder();  //初始化，Geocoder类
                gc.getLocation(point, function (rs) {   //getLocation函数用来解析地址信息，分别返回省市区街等
                    var addComp = rs.addressComponents;
                    province = addComp.province;//获取省份
                    console.log('province',province)

                    city = addComp.city;//获取城市
                    district = addComp.district;//区
                    street = addComp.street;//街


                    var marker = new BMap.Marker(point); //地图事件类
                    var opts = {
                        width: 25,     // 信息窗口宽度  
                        height: 120,     // 信息窗口高度  
                        title: "我所在的地点:<hr />"  // 信息窗口标题 ，这里声明下，可以在自己输出的信息里面嵌入html标签的
                    }
                    var infoWindow = new BMap.InfoWindow("省份:" + province + ";" + "城市:"
                        + city + ";<br /><br />" + "县/区:" + district + ";" + "街道:" + street + ".", opts);
                    // 创建信息窗口对象，把信息在初始化 地图信息窗口类的同时写进去


                    marker.enableDragging(); //启用拖拽事件
                    marker.addEventListener("dragend", function (e) {
                        gc.getLocation(point, function (rs) {
                            //由于在getLocation函数返回信息之前，首先执行它下面的代码的，所以要把重新拖动后的代码放到它里面
                            var addComp = rs.addressComponents;
                            province = addComp.province;//获取省份
                            city = addComp.city;//获取城市
                            district = addComp.district;//区
                            street = addComp.street;//街
                            opts = {
                                width: 25,     // 信息窗口宽度  
                                height: 160,     // 信息窗口高度  
                                title: "现在的位置:<hr />"  // 信息窗口标题  
                            }
                            point = new BMap.Point(e.point.lng, e.point.lat); //标记新坐标（拖拽以后的坐标）
                            marker = new BMap.Marker(point);  //事件类


                            infoWindow = new BMap.InfoWindow("省份:" + province + ";" + "城市:"
                                + city + ";<br /><br />" + "县/区:" + district + ";" + "街道:" + street + ".<br />" +
                                "经度：" + e.point.lng + "<br />纬度：" + e.point.lat, opts);

                            map.openInfoWindow(infoWindow, point);
                            //这条函数openInfoWindow是输出信息函数，传入信息类和点坐标
                        })
                    })

                    map.addControl(new BMap.NavigationControl()); //左上角控件
                    map.enableScrollWheelZoom(); //滚动放大
                    map.enableKeyboard(); //键盘放大

                    map.centerAndZoom(point, 13); //绘制地图
                    map.addOverlay(marker); //标记地图

                    map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
                });
            }

    </script>
</body>

</html>